<template>
    <h2>姓名操作</h2>
    姓氏: <input type="text" name="" v-model="user.firstName">
    名字: <input type="text" name="" v-model="user.lastName">

    <h2>计算属性提示</h2>
    姓名:<input type="text" v-model="fullName">
    姓名：<input type="text" v-model="setName">
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue';

    let user = reactive({
        firstName: "韭菜",
        lastName: "盒子"
    })
    // 只能单向获取，依赖数据发生变化时结果会变，但是结果改变依赖数据不变
    let fullName = computed(() => {
        return user.firstName + "-" + user.lastName
    })
    //双向联动 set get变成
    let setName = computed({
        // 获取
        get(){
            return user.firstName + "-" + user.lastName
        },
        //修改
        set(val){
            console.log(val)
            user.firstName = val.split("-")[0]
            user.lastName = val.split("-")[1]

        }
    })
</script>

